import './App.css'
import { useEffect,useLayoutEffect,useState } from 'react'

function App(){

    const [count,setCount] = useState(0)
    // const [name,setName] = useState('李四')
    const [name,setName] = useState(()=>{
        return '李四'
    })
    // 第一个参数回调函数: 组件初始化执行，组件更新之后执行(dom更新/浏览器渲染更新完成)
    // 第二个参数：数据依赖项,如果依赖项形式有,空数组,只会执行一次，如果依赖项形式没有，没有空数组，页面更新一次执行一次
    // 第三个返回值 会在组件更新，状态变化和组件卸载的时候执行
    useEffect(()=>{
        console.log('空对象');
    },[])

    useLayoutEffect(()=>{
        console.log('useLayoutEffect执行',count); // 在浏览器重新绘制屏幕之前进行布局测量
    },[count])

    useEffect(()=>{
        console.log('useEffect执行',count); // 2
        return ()=>{
            console.log('effect返回函数执行,组件卸载',count);  // 1,比console.log('useEffect执行'); 先打印,应用场景，qq聊天工具，作用是用于卸载
        }
    },[count])

    const btn_click = ()=>{
        console.log('count',count); // 上一次累加的值 不是最新的，因为react组件状态更新是异步队列的，为了性能
        // 因为浏览器的渲染和执行是互斥的，浏览器渲染比较复杂，而js执行又比较快
        setCount(count+1)
    }
    const btn_click2 = ()=>{
        console.log('name',name);
        setName('王五')
    }
    return (
        <>
        <h1>hello hooks</h1>
        <h2>{count}</h2>
        <h2>{name}</h2>
        <button onClick={btn_click}>加一</button>
        <button onClick={btn_click2}>修改名字</button>
        </>
    )
    // render(){
    // }
}

export default App